<%@ include file="../common/IncludeTop.jsp" %>

<div id="BackLink">
    <a href="main">Return to Main Menu</a>
</div>

<div id="Catalog">


    <div id="Cart">
        <script>
            $(document).ready(function () {
                $('input')//取得所有<input> 标签
                    //添加监听 onfocus
                    .on('focus', function () {
                        $(this).css("background-color", "#cccccc");
                    })
                    //添加监听 onblur
                    .on('blur', function () {
                        $(this).css("background-color", "#ffffff");
                        var username = $('#loginUser').attr('value');
                        var quantity = this.value;
                        var itemId = this.name;
                        var pThis = this;
                        $.ajax({
                            type: "GET",
                            url: "updateCartQuantities?username=" + username + "&quantity=" + quantity + "&itemId=" + itemId,
                            success: function (data) //data是 UpdateItemQuantityInCartServlet.java 里面这一换行输出的out.print(data);
                            {
                                console.log("username" + username + "   quantity" + quantity + "   itemId" + itemId);
                                console.log(data)
                                var dataList = data.split(",");
                                var totalStr = "total" + pThis.id.substring("quantity".length);//pThis.id.substring("quantity".length)是为了获取JSTL c:forEach 的下标
                                console.log("this: " + pThis + "   totalStr:" + totalStr);
                                $("#" + totalStr).text(dataList[0]);
                                console.log(data[0]);
                                $('#subtotal').text(dataList[1]);
                                console.log(data[1]);
                            }
                        });
                    });
            });
        </script>
        <h2>Shopping Cart</h2>
        <form id="update" method="post">
            <%--action="updateCartQuantities" 这个被我删掉了 因为在修改数量的时候回车会直接进入url:updateCartQuantities,但是后面不带参数 --%>
            <table>
                <tr>
                    <th><b>Item ID</b></th>
                    <th><b>Product ID</b></th>
                    <th><b>Description</b></th>
                    <th><b>In Stock?</b></th>
                    <th><b>Quantity</b></th>
                    <th><b>List Price</b></th>
                    <th><b>Total Cost</b></th>
                    <th>&nbsp;</th>
                </tr>

                <c:if test="${sessionScope.cart.numberOfCartItems == 0}">
                    <tr>
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>
                </c:if>

                <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}" varStatus="st">
                    <tr>
                        <td>
                            <a href="ViewItem?itemId=${cartItem.item.itemId}">${cartItem.item.itemId}</a>
                        </td>
                        <td>
                                ${cartItem.item.product.productId}
                        </td>
                        <td>
                                ${cartItem.item.attribute1} ${cartItem.item.attribute2}
                                ${cartItem.item.attribute3} ${cartItem.item.attribute4}
                                ${cartItem.item.attribute5} ${cartItem.item.product.name}
                        </td>
                        <td> ${cartItem.inStock} </td>
                        <td>
                            <input type="text" name="${cartItem.item.itemId}" value="${cartItem.quantity}"
                                   id="quantity${st.index}"/>
                                <%--不能用ItemId,虽然都是不一样的,但是ID Class等等属性要求不能有空格,ItemId会带一点非法的东西,很坑,还是用下标好--%>
                        </td>
                        <td>
                            <fmt:formatNumber value="${cartItem.item.listPrice}" pattern="$#,##0.00"/>
                        </td>
                        <td>
                                <%--<fmt:formatNumber value="${cartItem.cartItemTotal}" pattern="$#,##0.00" var="" />--%>
                            <span id="total${st.index}">
                                    ${cartItem.cartItemTotal}
                            </span>
                        </td>
                        <td>
                            <a href="removeItemFromCart?workingItemId=${cartItem.item.itemId}" class="Button">Remove</a>
                        </td>
                    </tr>
                </c:forEach>
                <tr>
                    <td colspan="7">Sub Total:
                        <span id="subtotal">${sessionScope.cart.subTotal}</span>
                        <%--<fmt:formatNumber value="${sessionScope.cart.subTotal}" pattern="$#,##0.00" />--%>
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </form>

        <c:if test="${sessionScope.cart.numberOfCartItems > 0}">
            <a href="viewNewOrderForm" class="Button">Proceed to Checkout</a>
        </c:if>
    </div>

    <div id="Separator">&nbsp;</div>
</div>

<%@ include file="../common/IncludeBottom.jsp" %>